<!-- 消息详情页面 -->
<!-- 小瓜子 更新于2020/08/21 -->

<!-- 小瓜子 更新于2020/08/26 -->
<!-- 完成页面接口调试，新增无粉丝和无关注时的提示 -->

<!-- 小瓜子 更新于 2020/09/04 -->
<!-- 完成分页加载 -->

<!-- 小瓜子 更新于 2020/09/05 -->
<!-- 添加加载时页面 -->
<template>
	<view> 
		<!-- 加载时的页面 -->
		<view class="loading" v-if="isLoading" :style="'height:' + loadingHeight + 'px;width: 100%;'">
			<text :style="'display: block; width: 100%; height: 100%; line-height: ' + loadingHeight + 'px; text-align: center; color:#999'">加载中...</text>
		</view>
		<!-- 2020/08/26 无粉丝，无关注提示 -->
		<view class="message" v-if="!isLoading">
			<!-- 自定义导航栏(navigationbar) -->
			<view class="nav">
				<view :class="activeSwiper == 0 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="0"><text>关注</text></view>
				<view :class="activeSwiper == 1 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="1"><text>粉丝</text></view>
			</view>
			<!-- 占位盒子 -->
			<view class="top_block"></view>
			<!-- <FansAndFollows></FansAndFollows> -->
			<!-- 页面主体内容，使用swiper，实现左右滑动翻页 -->
			<swiper 
				:style="'height:' + swiperItemHeight + 'px;'" 
				@change="swiperChange" 
				:current="activeSwiper" >
				<swiper-item>
					<view :class="activeSwiper == 0 ? 'page page_active' : 'page'">
						<FansAndFollows v-for="(item,index) in SummaryList[0]" :key="index" :datas="item"></FansAndFollows>
					</view>
					<UniLoadMore :status="status" color="#7F7F7F" :contentText="contentText"></UniLoadMore>
					<!-- <view class="" style="text-align:center; width: 100%; padding-top: 9px; color: #7F7F7F;" v-if="!SummaryList[0]">什么都没有了！</view> -->
				</swiper-item>
				<swiper-item>
					<view :class="activeSwiper == 1 ? 'page page_active' : 'page'">
						<FansAndFollows v-for="(item,index) in SummaryList[1]" :key="index" :datas="item"></FansAndFollows>
					</view>
					<UniLoadMore :status="status" color="#7F7F7F" :contentText="contentText"></UniLoadMore>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import FansAndFollows from "../../components/FansAndFollows.vue"
	import UniLoadMore from '../../components/plugins/uni-load-more.vue'
	import { _ajax } from '../../in-xupt-functions.js'
	export default {
		components: {
			FansAndFollows,
			UniLoadMore
		},
		data() {
			return {
				loadingHeight: 0,
				isLoading: true,
				activeSwiper: 0, // 判断是哪一栏被显示（我关注的/所有圈子）
				swiperItemHeight: 0, // swiper容器的高度
				sortingMode: 0, //  排序方式
				SummaryList: [[],[]],
				// loading前：more; loading中：loading; 没有更多了：noMore
				status: "more", 
				contentText: {
					contentdown: "下拉翻找更多东西~", // loading前的文字显示
					contentrefresh: "正在翻找~~", // loading中的显示
					contentnomore: "没有东西啦！" // 没有更多的显示
				},
				userId: undefined,
				fansPage: 1, // 粉丝列表的页面序号
				followPage: 1, // 关注列表的页面序号
				noMoreFans: false, // 判断粉丝列表是否还有更多数据
				noMoreFollow: false // 判断关注列表是否还有更多数据
			}
		},
		methods: {
			// 点击上方tab栏的项目时，更新当前index (activeSwiper)
			swichTab: function (e) {
				this.activeSwiper = e.currentTarget.dataset.index
			},
			// 当滑动swiper或者点击导航栏上的选择项目时，重新获取swiper高度
			swiperChange: function (data) {
				this.activeSwiper = data.detail.current;
				this.getheight(200);
			},
			// 获取当前swiper高度
			getheight: function(time) {
				setTimeout(() => {
					// 获取当前swiper-item的高度
					let query = uni.createSelectorQuery();
					let page_active = query.select(".page_active");
					page_active.fields({
						size: true
					}, data => {
						// 获取当前设备的高度，取swiper高度为设备高度和swiper-item高度的最大值 （这个方法有bug）
						uni.getSystemInfo({
							success: (data2) => {
								if (data.height <= data2.windowHeight) {
									this.status = 'nomore'
								}
								this.swiperItemHeight = Math.max(data2.windowHeight, data.height) + 70;
							}
						})
					}).exec();
				},time)
			},
			loadMore: function() {
				// activeSwiper为0时说明在关注列表
				if(this.activeSwiper == 0) {
					if(!this.noMoreFollow) {
						console.log('jiazaigengduo')
						this.status = 'loading';
						this.followPage++;
						this.loadFollowList();
					}else {
						this.status = 'nomore'
					}
				}else if (this.activeSwiper == 1) {
					if(!this.noMoreFans) {
						this.status = 'loading';
						this.fansPage++;
						this.loadFansList();
					}else {
						this.status = 'nomore'
					}
				}
			},
			// 请求粉丝列表
			loadFansList: async function () {
				_ajax({
					url: '/user/' + this.userId + '/fans?pageNum=' + this.fansPage,
					method: 'GET'
				})
				.then(res => {
					this.SummaryList[1].push(...res.data.data.list);
					this.getheight(100)
					if(res.data.data.nextPage == 0) {
						this.status = 'nomore'
						this.noMoreFans = true;
					}else {
						this.status = 'more'
					}
				})
			},
			// 请求关注列表
			loadFollowList:  async function () {
				_ajax({
					url: '/user/' + this.userId + '/follows?pageNum=' + this.followPage,
					method: 'GET'
				})
				.then(res => {
					console.log(res)
					this.SummaryList[0].push(...res.data.data.list);
					this.getheight(100)
					if(res.data.data.nextPage == 0) {
						this.noMoreFollow = true;
						this.status = 'nomore'
					}else {
						this.status = 'more'
					}
				})
			}
		},
		onLoad: function(options){
			this.activeSwiper = options.isFans
			// 得到屏幕高度，并将这个值设置为加载遮罩层的高度
			uni.getSystemInfo({
				success: (data) => {
					this.loadingHeight = data.windowHeight;
				}
			})
			
			var _this = this;
			_this.userId = uni.getStorageSync('userId');
			uni.showLoading({
				title: '正在加载......',
				mask: true
			});
			(async function() {
				let res1 = await _ajax({
					url: '/user/' + _this.userId + '/follows?pageNum=' + _this.followPage + '&pageSize=20',
					method: 'GET'
				})
				let res2 = await _ajax({
					url: '/user/' + _this.userId + '/fans?pageNum=' + _this.fansPage + '&pageSize=20',
					method: 'GET'
				})
				_this.isLoading = false;
				_this.SummaryList[0].push(...res1.data.data.list);
				_this.SummaryList[1].push(...res2.data.data.list);
				if(res1.data.data.isLastPage) {
					_this.noMoreFollow = true
				}
				if(res2.data.data.isLastPage) {
					_this.noMoreFans = true
				}
				uni.hideLoading();
				_this.getheight(100);
			})()
			// 加载关注和粉丝
			
		},
		// 触底加载更多
		onReachBottom: function() {
			if(this.status !== 'nomore') {
				this.loadMore(this.activeSwiper)
			}
		}
	}
</script>

<style lang="less">
	// --status-bar-height为设备状态栏高度
	@statusHeight: var(--status-bar-height);
	.inxupttubiao36::before {
		font-weight: 800;
		color: #FFFFFF;
		font-size: 18px;
	}
	.message {

		background-color: @g-background;
		// 占位盒子
		.top_block {
			height: 30px;
			width: 100%;
		}
		.nav {
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: fixed;
			margin-bottom: 5px;
			height: 30px;
			width: 100%;
			background-color: #FFFFFF;
			font-size: 32rpx;
			color: @g-gray;
			box-shadow: 0rpx 0rpx 10rpx rgba(0,0,0,.1);
			z-index: 2;
			.listTitle,
			.listTitle_active {
				display: inline-block;
				line-height: 30px;
				width: 50%;
				text-align: center;
			}
			.listTitle_active {
				color: #000;
				font-weight: 800;
				border-bottom: 4px solid @g-pink;
			}
			.creat {
				margin-left: 25px;
				margin-top: 10px;
				width: 50rpx;
				height: 25px;
				line-height: 25px;
				text-align: center;
				border-radius: 5px;
				background-color: @g-pink;
			}
		}
		swiper {
			color: #000;
			z-index: 0;
			// min-height: 1000rpx;
		}
		.page {
			width: 100%;
		}
	}
</style>
